<!DOCTYPE html>
<html>
  <head>
    <title>Photo-Hub</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <link href="css/mystyle.css" rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script src="js/hander.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          var ispass1=false;
          var ispass2=false;
          $("#pass").focus();
          $("#pass").blur(function(){
            var value=$(this).val();
            if(value.length<3||value.length>15){
              $("#info1").html("the length of password is between 3 to 15");
              return;
            }else{
              $("#info1").html("");
            }
            ispass1=true;
          });
          $("#repassword").blur(function(){
           var value1=$(this).val();
           var value2=$("#pass").val();
           if(value1!=value2){
             $("#info2").html("the sencond password is not same sa the first passowrd");
             return;
           }else{
             $("#info2").html("");
           }
           ispass2=true;
         });
         $("input[type='button']").click(function(){
           if($("#pass").val().trim()==""){
             $("#info1").html("the password should be not empty");
             return ;
           }
           if($("#repassword").val().trim()==""){
             $("#info2").html("the password should be not empty");
             return ;
           }
           if(ispass1&&ispass2){
        	   var id=getCookie("resetUserId");
        	   /*if(id.trim()==''){
        		   
        	   }*/
             $.ajax({
               url:"CenterController",
               data:{"operator":'updatePassword','id':id,'password':$("#pass").val().trim()},
               dataType:"text",
               async:true,
               success:function(result){
                  $(".password_submit .tip").html(result);
                  delCookie("resetUserId");
                  setTimeout(function(){
                	  window.location.href="index.html";
                  }, 1000);
               }
             });
           }
         });
        });
    </script>
  </head>
  <body>
    <div class="header">
        <div class="container">
           <div class="logo">
        <h1><a href="index.html">Photo Hub</a></h1>
       </div>
       <div class="top_right">
         <ul class="top_right_main">
          <li><a href="register.html">Register</a></li>|
          <li class="login" >
             <div id="loginContainer"><a href="javascript:void();" id="loginButton"><span>Login</span></a>
                <div id="loginBox">
                  <form id="loginForm">
                          <fieldset id="body">
                            <fieldset>
                                    <label for="userName">userName</label>
                                    <input type="text" name="userName" id="userName">
                              </fieldset>
                              <fieldset>
                                      <label for="password">Password</label>
                                      <input type="password" name="password" id="password">
                               </fieldset>
                              <input type="button" id="login" value="Sign in">
                            <label for="checkbox"><input type="checkbox" id="checkbox" checked=""> <i>Remember me</i></label>
                            <div class="tip clr"></div>
                        </fieldset>
                           <span><a href="forgetPassword.html">Forgot your password?</a></span>
                   </form>
                  </div>
                </div>
            </li>
            <li>
            </li>
         </ul>
          <script type="text/javascript">
                var value=getCookie('loginInfo');
                if(value.trim()!=""){
                  $(".top_right_main").html("<li>welcome! <a href='javascript:void(void);' id='personal'>"+value+"</a>&nbsp;"
                  +"<a href='javascript:void(void);' id='exit'>Exit</a></li>");
                }
          </script>
        </div>
       <div class="clearfix"></div>
      </div>
    </div>

   	<div class="password" id="password">
      <h3>RESET PASSWORD</h3>
   		<div class="password_input">
   			<label for="pass">Password*</label>
   			<span><input type="password" id="pass"></span>
        <span id="info1" class="tip"></span>
   		</div>
   		<div class="password_input">
   			<label for="repassword">Confirm Password*</label>
   			<span><input type="password" id="repassword"></span>
        <span id="info2" class="tip"></span>
   		</div>
   		<div class="password_submit">
   			<input type="button" value="SUBMIT"><span class="tip"></span>
   		</div>
   	</div>

    <div class="grid_2">
      <div class="container">
        <div class="col-md-3 col_2">
          <h3>Stock Photo<br>Categories</h3>
        </div>
        <div class="col-md-9 col_5">
          <div class="col_1_of_5 span_1_of_5">
            <ul class="list1">
                <li>
                <input type="hidden" value="1">
                <a href="stock.html">Abstract</a>
                </li>
                    <li><input type="hidden" value="2"><a href="stock.html">Animals/Wildlife</a></li>
                    <li><input type="hidden" value="3"><a href="stock.html">The Arts</a></li>
                    <li><input type="hidden" value="4"><a href="stock.html">Backgrounds/Textures</a></li>
                    <li><input type="hidden" value="5"><a href="stock.html">Beauty/Fashion</a></li>
                    <li><input type="hidden" value="6"><a href="stock.html">Buildings/Landmarks</a></li>
                  </ul>
          </div>
          <div class="col_1_of_5 span_1_of_5">
            <ul class="list1">
                <li><input type="hidden" value="7"><a href="stock.html">Business/Finance</a></li>
                    <li><input type="hidden" value="8"><a href="stock.html">Celebrities</a></li>
                    <li><input type="hidden" value="9"><a href="stock.html">Editorial</a></li>
                    <li><input type="hidden" value="10"><a href="stock.html">Education</a></li>
                    <li><input type="hidden" value="11"><a href="stock.html">Food and Drink</a></li>
                    <li><input type="hidden" value="12"><a href="stock.html">Healthcare/Medical</a></li>
                  </ul>
          </div>
          <div class="col_1_of_5 span_1_of_5">
            <ul class="list1">
                <li><input type="hidden" value="13"><a href="stock.html">Holidays</a></li>
                    <li><input type="hidden" value="14"><a href="stock.html">Illustrations/Clip-Art</a></li>
                    <li><input type="hidden" value="15"><a href="stock.html">Industrial</a></li>
                    <li><input type="hidden" value="16"><a href="stock.html">Interiors</a></li>
                    <li><input type="hidden" value="17"><a href="stock.html">Miscellaneous</a></li>
                    <li><input type="hidden" value="18"><a href="stock.html">Model Released Only</a></li>
            </ul>
          </div>
          <div class="col_1_of_5 span_1_of_5">
            <ul class="list1">
                <li><input type="hidden" value="19"><a href="stock.html">Nature</a></li>
                    <li><input type="hidden" value="20"><a href="stock.html">Objects</a></li>
                    <li><input type="hidden" value="21"><a href="stock.html">Parks/Outdoor</a></li>
                    <li><input type="hidden" value="22"><a href="stock.html">People</a></li>
                    <li><input type="hidden" value="23"><a href="stock.html">Religion</a></li>
                    <li><input type="hidden" value="24"><a href="stock.html">Science</a></li>
                  </ul>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="clearfix"> </div>
      </div>
    </div>
    <script type="text/javascript">
      //处理下方的categroy
      $.ajax(
          {
            url:"CenterController",
            type:"get",
            data:{'operator':'init','page':'index','part':'categroy'},
            dataType:"JSON",
            success:function(data){
              for(var i=0;i<data.length;i++){
                var $input=$(".list1 li input").eq(i);
                $input.attr('value',data[i].id);
                var $a=$(".list1 li a").eq(i);
                $a.html(data[i].name);
              }
            }
          }
        );
    </script>
    <div class="grid_3">
  	  <div class="container">
  	  	 <ul id="footer-links">
  			<li><a href="#">Terms of Use</a></li>
  			<li><a href="#">Royalty Free License</a></li>
  			<li><a href="#">Extended License</a></li>
  			<li><a href="#">Privacy</a></li>
  			<li><a href="#">Support</a></li>
  			<li><a href="#">About Us</a></li>
  			<li><a href="#">FAQ</a></li>
  			<li><a href="#">Categories</a></li>
           </ul>
           <p>Copyright © Photo-Hub. All Rights Reserved</p>
  	  </div>
  	</div>
  </body>
</html>
